<template>
  <div class="clearfix" v-loading="loading">
    <el-col :span="24" class="content_edit pd_20">
      <div id="diy-phone" style="margin-top:0">
        <div class="diy-phone-header">
          <i class="diy-phone-receiver"></i>
          <div class="diy-phone-title j-pagetitle"></div>
        </div>
        <div class="diy-phone-contain" id="j-materialPrev">
          <div class="materialPrePanel mgt20" v-show="add_form.is_text == '0'">
            <p>图文内容：</p>
            <div>
              <div class="single-summary" v-html="add_form.content"></div>
            </div>
          </div>
          <div class="materialPrePanel mgt20" v-show="add_form.is_text == '1'">
            <p>视频内容：</p>
            <div>
              <video style="width:100%" controls="controls" id="my_video" :src="add_form.video"></video>
            </div>
          </div>
        </div>
        <i class="diy-phone-footer"></i>
      </div>
      <div class="relative f_l floatBox-width" style="margin-left: 25px;position: relative;width:60%">
        <div class="black">
          <div class="add_con_form" style="padding-left: 25px;">
            <el-form label-position="left" :model="add_form">
              <el-form-item label="课程名称：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.title" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="是否付费" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-switch class="zdySwith" :width="82" v-model="add_form.is_free" active-color="#13ce66" inactive-color="#ffffff" active-text="收费"
                      inactive-text="免费" active-value="1" inactive-value="0"></el-switch>
                </el-col>
              </el-form-item>

              <el-form-item label="是否图文：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-switch class="zdySwith" :width="82" v-model="add_form.is_text" active-color="#13ce66" inactive-color="#ffffff" active-text="视频"
                      inactive-text="图文" active-value="1" inactive-value="0"></el-switch>
                </el-col>
              </el-form-item>
              <el-form-item label="点击量：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="Number" :rows="6" clearable placeholder="请输入" v-model="add_form.hit" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="课程介绍视频：" :label-width="formLabelWidth" v-show="add_form.is_text == '1'">
                <el-button :loading="$store.state.isLoading" type="primary" @click="uploadVideo()">上传</el-button>
                <el-col :span="16">
                  <el-input type="text" clearable :rows="6" placeholder="请上传课程介绍视频" v-model="add_form.video"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="black" v-show="add_form.is_text == '0'">
          <div class="ueditor">
            <ue v-model="add_form.content" v-loading="loadding1" v-if="!loadding1" :value="add_form.content" style="width:375px"
                upload-url="/api/common/upload/index/" fileName="file" />
            <div class="blank"></div>
          </div>
        </div>
        <div class="submit_button">
          <el-col :span="24" class="tc">
            <el-button :loading="$store.state.isLoading" type="primary" @click="subForm">保存</el-button>
          </el-col>
        </div>
        <!-- 小箭头 -->
        <i class="arrow arrow_out top150"></i>
      </div>
      <el-dialog :close-on-click-modal="false" @close="close_video" title="上传视频" :append-to-body="true" :visible.sync="dialogaddvideoVisible">
        <uploadvideo @send_url="rev_send_url" :pro_src="add_form.video" ref="video_plugin"></uploadvideo>
      </el-dialog>
    </el-col>
  </div>
</template>
<script>
import uploadvideo from "@/components/currency/uploadvideo";
import ue from "@/components/currency/Ue/ue.vue";
export default {
  props: {
    item: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      loadding1: true,
      dialogaddvideoVisible: false,
      config: {
        qllink: false
      },
      add_form: {
        cid: "",
        title: "",
        video: "",
        content: "",
        is_free: "0",
        is_text: "1",
        hit: ""
      },
      loading: true,
      formLabelWidth: "120px"
    };
  },
  components: {
    uploadvideo,
    ue
  },

  methods: {
    close_video () {
      this.dialogaddvideoVisible = false;
      this.$refs.video_plugin.close_video();
    },
    rev_send_url (obj) {
      this.$set(this.add_form, "video", obj.video_url);
      this.$set(this.add_form, "video_pic", obj.video_pic);
      this.$set(this.add_form, "vid", obj.video_id);
    },
    uploadVideo () {
      //点击上传视频
      this.dialogaddvideoVisible = true;
    },
    handleItemChange (val) {
      var a = this.options.find(item => {
        //这里的chargingWorkNameList就是上面遍历的数据源
        return item.id === val;
        //筛选出匹配数据，是对应数据的整个对象
      });
      this.newsName = a.title;
    },
    subForm () {
      if (this.add_form.title == "") {
        this.$fnc.alertError("添加失败!", "课程标题不能为空");
        return;
      } else if (this.add_form.is_text == "0" && this.add_form.content == "") {
        this.$fnc.alertError("添加失败!", "图文内容不能为空");
        return;
      } else if (this.add_form.is_text == "1" && this.add_form.video == "") {
        this.$fnc.alertError("添加失败!", "请添加课程视频");
        return;
      } else if (this.add_form.id == undefined) {
        this.add_submit();
      } else {
        this.edit_submit();
      }
    },
    add_submit () {
      //添加
      let params = {};
      // var params = this.add_form;
      params = this.add_form;
      params.lesson_id = this.$route.query.id;
      this.$api.getShops.add_stagelist(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "添加成功"
          });
          this.$emit("openThis");
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    edit_submit () {
      //修改
      var params = {};
      params = this.add_form;
      this.$api.getShops.edit_stagelist(params).then(res => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "修改成功"
          });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    }
  },

  beforeCreate () {
    //数据未加载之前调用loading
    this.loading = true;
  },
  created () {
    this.loading = false;

    if (JSON.stringify(this.item) != "{}" && this.item != undefined) {
      this.add_form = this.item;
    } else {
      this.add_form = {
        title: "",
        is_free: "0",
        is_text: "1",
        video: "",
        content: "",
        hit: ""
      };
    }
    this.loadding1 = false;
  },
  mounted () { },
  computed: {}
};
</script>
<style scoped>
.course_phone {
  width: 100%;
  height: 120px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course_phone_left {
  width: 60%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.course_phone_left h1 {
  line-height: 32px;
}
.course_phone_left p {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 20px;
}
.course_phone_right {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
}
.course_phone_right img {
  height: 100%;
  border: 1px solid #eeeeee;
}
.course_phone_video {
  width: 95%;
  /* padding: 10px; */
  margin: 0 auto;
  border-top: 1px solid #eeeeee;
}
.course_phone_video p {
  font-size: 12px;
  /* color: #000; */
  line-height: 28px;
}
.course_phone_video video {
  width: 100%;
}
</style>
